<template>
  <FormIndex ref="formRef" data-v-f4e8a1bd="" class="content-wrap">
    <div data-v-f4e8a1bd="" data-v-3682307e="" class="content-main">
      <div data-v-f4e8a1bd="" data-v-3682307e="" class="content-title logo">
        欢迎
      </div>
      <div data-v-f4e8a1bd="" data-v-3682307e="" class="content-from">
        <FormItem
          :rules="[{ type: 'mobile' }]"
          :value="phone"
          formName="mobile"
          data-v-f4e8a1bd=""
          data-v-3682307e=""
          class="from-item"
        >
          <span data-v-f4e8a1bd="" class="label">手机号</span
          ><input
            v-model="phone"
            data-v-f4e8a1bd=""
            data-v-3682307e=""
            type="text"
            placeholder="请输入手机号"
            maxlength="11"
          />
        </FormItem>
        <FormItem :rules="[{ type: 'required',message:'请输入验证码' }]" :value="code" data-v-f4e8a1bd="" class="from-item">
          <span data-v-f4e8a1bd="" class="label">验证码</span
          ><input
            v-model="code"
            data-v-f4e8a1bd=""
            placeholder="请输入验证码"
            maxlength="4"
            type="text"
            style="width: 250px"
          />
          <div @click="sendSmscode" data-v-f4e8a1bd="" class="send">
            <span data-v-f4e8a1bd="" class="text">{{ state.verifyText }}</span>
          </div>
        </FormItem>
      </div>
      <div @click="submit" data-v-f4e8a1bd="" class="login-btn">登录</div>
      <FormItem :rules="[{ type: 'required',message:'请勾选平台服务协议' }]" :value="checked" data-v-f4e8a1bd="" class="agree">
        <Checkbox v-model="checked">
          阅读知晓并同意
          <a data-v-f4e8a1bd="" href="/agreement?type=1" class="blue"
            >《平台服务协议》</a
          >
        </Checkbox>
      </FormItem>
    </div>
  </FormIndex>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from 'vue-router'
import request from "@/utils/request";
import FormIndex from "@/components/Form/index.vue";
import FormItem from "@/components/Form/item.vue";
import useSmscode from "@/hooks/useSmscode";
import useLogin from "../../hooks/useLogin";
import { Checkbox } from "vant";
const router = useRouter();
const { state, getSmsCode } = useSmscode();
const { setUserInfo } = useLogin();
const formRef = ref();
const checked = ref(false);
const sendSmscode = async () => {
  let valid = await formRef.value.validate("mobile");
  if (!valid) {
    request({
      url: "/App/login/sendSms",
      method: "POST",
      data: {
        isError: true,
        mobile: phone.value,
      },
    }).then((res) => {
      getSmsCode();
    });
  }
};
const phone = ref("");
const code = ref("");
const submit = async () => {
  let isValid = await formRef.value.validate();
  if(!isValid){
    request({
      url: "/App/login/login",
      method: "POST",
      data: {
        isError: true,
        mobile: phone.value,
        code:code.value
      },
    }).then((res) => {
      setUserInfo(res.data);
      router.push("/home")
    });
  }
};
</script>
<style lang="scss" scoped>
.content-wrap[data-v-f4e8a1bd] {
  width: 100%;
  min-height: 100vh;
  background-color: #f4f5f9;
  overflow: hidden;
  font-size: 0.32rem;
}

.content-main[data-v-f4e8a1bd] {
  background-color: #fff;
  overflow: hidden;
}

.content-title[data-v-f4e8a1bd] {
  margin: 1.146667rem 0.826667rem 0;
  color: #222;
  font-size: 0.56rem;
  font-weight: 700;
}

.content-from[data-v-f4e8a1bd] {
  width: 8.906667rem;
  margin: 0.64rem auto 0;
}

.from-item[data-v-f4e8a1bd] {
  width: 8.266667rem;
  height: 1.28rem;
  margin: 0 auto 0.533333rem;
  position: relative;
  border-bottom: 0.026667rem solid #f3f3f3;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.from-item .label[data-v-f4e8a1bd] {
  width: 1.973333rem;
  height: 1.28rem;
  line-height: 1.28rem;
  text-align: center;
  font-size: 0.426667rem;
  color: #222;
  font-weight: 700;
}

.from-item input[data-v-f4e8a1bd] {
  border: none;
  outline: none;
  transition: 0.3s;
  width: 4.666667rem;
  margin-left: 0.373333rem;
  font-size: 0.426667rem;
  border-radius: 0;
}

.send[data-v-f4e8a1bd] {
  position: absolute;
  font-size: 0.373333rem;
  color: #308dff;
  right: 0;
  top: 0.266667rem;
}

.login-btn[data-v-f4e8a1bd] {
  width: 8.266667rem;
  height: 1.306667rem;
  text-align: center;
  line-height: 1.306667rem;
  margin: 0.453333rem auto 0.32rem;
  border-radius: 0.133333rem;
  font-size: 0.48rem;
  font-weight: 700;
  background-color: #308dff;
  color: #fff;
  transition: 0.4s;
}

.agree[data-v-f4e8a1bd] {
  width: 8.266667rem;
  margin: 1.013333rem auto 0.72rem;
}
.blue{
  color:#308dff;
}
</style>